S
Steve Wasielewski

Resource Scheduler Design

Tailwind Room Scheduler is a Blazor weekly booking UI using Tailwind CSS. It renders a sticky room column and a 7-day grid with booking blocks and a modal Add Booking form using InputDate.

LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Weekly scheduler grid (7 days) with room rows and colspan-based booking blocks. - Sticky left column for room name and type. - Modal Add Booking form with guest, room select, start/end InputDate controls and inline validation messages. - Previous/next week navigation and sample in-memory data. ## Key components - Blazor components: Razor components for scheduler and demo page. - Form controls: InputText, InputSelect, InputDate and standard HTML buttons. - Table/grid: <table> with dynamic <thead> and <tbody>, colspan logic for multi-day bookings. - View models: RoomViewModel and BookingViewModel classes. ## How it works - Data binding: @bind-Value used on InputText, InputSelect and InputDate to populate NewBooking. - Booking placement: GetBookingForRoomOnDate finds bookings by room and date; colspan is computed from booking duration to span cells. - Navigation: ShowPreviousWeek and ShowNextWeek change ViewStartDate to shift the 7-day window. - Modal & validation: IsAddBookingModalOpen toggles modal; HasSubmitted drives simple client-side checks (guest name, room selection, date ranges) before adding to in-memory Bookings. - Sample data: Rooms and Bookings initialized in OnInitialized for local preview and testing. ## Styling - Tailwind CSS utilities drive layout and spacing (bg-*, text-*, grid, flex, px-*, py-*, rounded-*). - Sticky left column uses CSS classes and z-index to remain visible while scrolling horizontally. - Modal uses fixed inset overlay and a centered panel; visual states use Tailwind focus/hover utilities. - Responsiveness: table is wrapped in overflow-x-auto; desktop-focused layout assumes horizontal space for the 7-day grid. ## Reuse steps 1. Add the Razor files and SchedulerViewModels.cs to a Blazor project (Server or WASM). 2. Ensure Tailwind CSS is available or adapt classes to the existing CSS framework. 3. Import namespaces in _Imports.razor if needed and register any JS/CSS assets (font icons used in the demo). 4. Replace in-memory sample data with application services or APIs; expose methods to load/save bookings. 5. Adjust models, validation rules, and add server-side checks when wiring persistence and concurrency. ## Limitations & next steps - Persistence: Bookings are stored in-memory; integration with a backend API or database is required for real usage. - Concurrency & validation: No server-side validation, conflict detection, or auth/authorization is implemented. - Accessibility: Basic focus states exist, but full ARIA roles and keyboard navigation for the grid and modal should be added. - Enhancements: Add drag-and-drop booking adjustments, multi-week view, time-of-day slots, or export/print features. Note: This page is a single component scaffold generated by Instruct UI and intended as an editable preview; application wiring for services, auth, and persistence is required to make it production-ready.